<template>
  <div id="labTatRules">
    <Breadcrumb content="TAT组合规则设置" />
    <div class="bodyContent">
      <!-- vxe-toolbar -->
      <Splitpanes class="area">
        <Pane size="55">
          <vxe-toolbar>
            <template #buttons>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" @click="refreshGroupList"></vxe-button>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-save" content="保存" @click="saveGroupruleList"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="tableBox">
            <vxe-table border ref="tableRef" height="auto" :column-config="{ resizable: true }" :row-config="{isCurrent:true}" :data="tatBaseRuleList" @cell-click="rowClick">
              <vxe-column field="seq" title="#" width="30" type="seq" align="center"></vxe-column>
              <vxe-column field="baseruleNo" title="编号" width="80px">
                <template #default="{ row }">
                  {{ row.baseruleNo }}
                </template>
                <template #edit="{ row }">
                  <vxe-input v-model="row.baseruleNo" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="baseruleNa" title="TAT基础规则名称" width="180px">
                <template #default="{ row }">
                  {{ row.baseruleNa }}
                </template>
                <template #edit="{ row }">
                  <vxe-input v-model="row.baseruleNa" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="remark" title="备注" min-width="180px"></vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <Pane size="45">
          <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane label="报告单元" name="rptGroup">
              <vxe-toolbar>
                <template #buttons>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="添加" @click="addEvent"></vxe-button>
                  <vxe-button type="text" class="button-red" icon="vxe-icon-square-plus" content="删除" @click="deleteMapperDetail"></vxe-button>
                </template>
              </vxe-toolbar>
              <div style="height:calc(100% - 40px)">
                <vxe-table ref="rptGroupRef" :loading="loadingDetail" :data="rptGroupList" :scroll-y="{enabled:true}" height="auto" :row-config="{isCurrent:true}">
                  <vxe-column type="seq" width="30"></vxe-column>
                  <vxe-column field="rptGroup" title="编码" width="100px"></vxe-column>
                  <vxe-column field="rptGroupName" title="名称" min-width="120px"></vxe-column>
                </vxe-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="收费项目" name="feeItem">
              <vxe-toolbar>
                <template #buttons>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="添加" @click="addEvent"></vxe-button>
                  <vxe-button type="text" class="button-red" icon="vxe-icon-square-plus" content="删除" @click="deleteMapperDetail"></vxe-button>
                </template>
              </vxe-toolbar>
              <div style="height:calc(100% - 40px)">
                <vxe-table ref="feeItemRef" :loading="loadingDetail" :data="feeItemList" :scroll-y="{enabled:true}" height="auto" :row-config="{isCurrent:true}">
                  <vxe-column type="seq" width="30"></vxe-column>
                  <vxe-column field="feeCode" title="编码" width="100px"></vxe-column>
                  <vxe-column field="feeName" title="名称" min-width="120px"></vxe-column>
                </vxe-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="申请科室" name="department">
              <vxe-toolbar>
                <template #buttons>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="添加" @click="addEvent"></vxe-button>
                  <vxe-button type="text" class="button-red" icon="vxe-icon-square-plus" content="删除" @click="deleteMapperDetail"></vxe-button>
                </template>
              </vxe-toolbar>
              <div style="height:calc(100% - 40px)">
                <vxe-table ref="deptRef" :loading="loadingDetail" :data="deptList" :scroll-y="{enabled:true}" height="auto" :row-config="{isCurrent:true}">
                  <vxe-column type="seq" width="30"></vxe-column>
                  <vxe-column field="code" title="编码" width="100px"></vxe-column>
                  <vxe-column field="name" title="名称" min-width="120px"></vxe-column>
                </vxe-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="适用时段" name="timeSlot">
              <vxe-toolbar>
                <template #buttons>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="添加" @click="addTimeSlot"></vxe-button>
                  <vxe-button type="text" class="button-red" icon="vxe-icon-square-plus" content="删除" @click="deleteMapperDetail"></vxe-button>
                </template>
              </vxe-toolbar>
              <div style="height:calc(100% - 40px)">
                <vxe-table ref="timeSlotRef" height="auto" :loading="loadingDetail" :scroll-y="{enabled:true}" :data="timeSlotList" :edit-config="{trigger: 'click', mode: 'cell'}" :row-config="{isCurrent:true}">
                  <vxe-column type="seq" width="30"></vxe-column>
                  <vxe-column field="startTime" title="开始时间" width="100px" :edit-render="{autofocus: '.vxe-input--inner'}">
                    <template #edit="{row}">
                      <vxe-input v-model="row.startTime" type="text"></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column field="endTime" title="结束时间" min-width="120px" :edit-render="{autofocus: '.vxe-input--inner'}">
                    <template #edit="{row}">
                      <vxe-input v-model="row.endTime" type="text"></vxe-input>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </Pane>
      </Splitpanes>
    </div>
    <vxe-modal v-model="isVisiable" width="55vw" height="65vh" :loading="loadingModel" show-footer destroy-on-close :mask="false">
      <template #title>
        <span class="text-bold">{{modelName}}</span>
      </template>
      <template #default>
        <div style="height:calc(100%)">
          <vxe-table ref="rptGroupModelRef" v-if="activeName==='rptGroup'" height="auto" :scroll-y="{enabled:true}" :row-config="{isCurrent:true}" :data="rptGroupModelList">
            <vxe-column type="checkbox" width="30" align="center"></vxe-column>
            <vxe-column type="seq" width="30"></vxe-column>
            <vxe-column field="rptGroup" title="编码" width="100px"></vxe-column>
            <vxe-column field="rptGroupName" title="名称" min-width="120px"></vxe-column>
          </vxe-table>
          <vxe-table ref="feeItemModelRef" v-if="activeName==='feeItem'" height="auto" :scroll-y="{enabled:true}" :row-config="{isCurrent:true}" :data="feeItemModelList">
            <vxe-column type="checkbox" width="30" align="center"></vxe-column>
            <vxe-column type="seq" width="30"></vxe-column>
            <vxe-column field="feeCode" title="编码" width="100px"></vxe-column>
            <vxe-column field="feeName" title="名称" min-width="120px"></vxe-column>
          </vxe-table>
          <vxe-table ref="deptModelRef" v-if="activeName==='department'" height="auto" :scroll-y="{enabled:true}" :row-config="{isCurrent:true}" :data="deptModelList">
            <vxe-column type="checkbox" width="30" align="center"></vxe-column>
            <vxe-column type="seq" width="30"></vxe-column>
            <vxe-column field="code" title="编码" width="100px"></vxe-column>
            <vxe-column field="name" title="名称" min-width="120px"></vxe-column>
          </vxe-table>
        </div>
      </template>
      <template #footer>
        <vxe-toolbar>
          <template #buttons>
          </template>
          <template #tools>
            <vxe-button type="text" class="button-white" @click="isVisiable=false">取消</vxe-button>
            <vxe-button type="text" class="button-blue" @click="confirmSelection">确定</vxe-button>
          </template>
        </vxe-toolbar>
      </template>
    </vxe-modal>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========src\views\lab_sys\bac_set\BacGermDict.vue
import Breadcrumb from '../../../components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '../../../utils/CommonMessage';
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import XEClipboard from 'xe-clipboard';
import LabTatBaseRulesForm from './LabTatBaseRulesForm.vue'; //基本信息表单组件
import { AppStore } from '@/stores/store';
import { IsEmpty } from '@/utils/common';
let store = AppStore();

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
const LabTatBaseRulesFormRef = ref(null);/**右侧表单对象 */
let content = ref('TAT时间规则设置');
let isVisiable = ref(false);/**弹窗选择 */
let showLoading = ref(false); /**加载中 loading效果状态 */
let loadingModel = ref(false);/**弹窗数据加载中 */
let loadingDetail = ref(false);/**明细加载中 */
let tatBaseRuleList = reactive([]);/**基础规则 */
const tableRef = ref(null); //表格ref标记
let activeName = ref('rptGroup');/**当前活动标签对象 */
let modelName = ref('');/**弹窗标题 */
let rptGroupModelList = reactive([]);/**报告单元列表(弹窗)*/
let rptGroupModelRef = ref(null);/**报告单元(弹窗) */
let rptGroupList = reactive([]);/**报告单元列表*/
let rptGroupRef = ref(null);/**报告单元 */

let feeItemModelList = reactive([]);/**申请项目列表(弹窗)*/
let feeItemModelRef = ref(null);/**申请项目(弹窗) */
let feeItemList = reactive([]);/**申请项目列表*/
let feeItemRef = ref(null);/**申请项目 */

let deptModelList = reactive([]);/**科室列表(弹窗)*/
let deptModelRef = ref(null);/**科室(弹窗) */
let deptList = reactive([]);/**科室列表*/
let deptRef = ref(null);/**科室 */

let timeSlotList = reactive([]);/**适用时段列表*/
let timeSlotRef = ref(null);/**适用时段 */

// 方法定义区 =============
onMounted(() => {
  findBaseRules();
});

/**查询基础规则 */
function findBaseRules() {
  tatBaseRuleList.length = 0;
  showLoading.value = true;
  const url = '/api/lab-tat-baserule/findLabTatBaseruleList';
  proxy.$http
    .get(url)
    .then((res: any) => {
      tatBaseRuleList.length = 0;
      if (res.status.code === 1) {
        tatBaseRuleList.push(...res.data);
        if (tatBaseRuleList.length > 0) {
          rowClick({
            row: tatBaseRuleList[0],
            rowIndex: 0
          });
          tableRef.value?.setCurrentRow(tatBaseRuleList[0]);
        }
      }

      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}

/**基础规则行选中状态 */
async function rowClick({ row, rowIndex }: any) {
  await tableRef.value?.setCurrentRow(row);
  refreshGroupList();
}

/**添加按钮事件 */
function addEvent() {
  switch (activeName.value) {
    case 'rptGroup':
      modelName.value = '请选择报告单元';
      loadRptGroup();
      break;
    case 'feeItem':
      modelName.value = '请选择申请项目';
      loadFeeItem();
      break;
    case 'department':
      modelName.value = '请选择科室';
      loadDepts();
      break;
    default:
      break;
  }
  isVisiable.value = true;
}

/**加载报告单元 */
function loadRptGroup() {
  loadingModel.value = true;
  rptGroupModelList.length = 0;
  const url = '/api/rptGroup/getRptGroupPageList';
  proxy.$http
    .get(url, { params: { pageIndex: 1, pageSize: 2000 } })
    .then((res: any) => {
      Object.assign(rptGroupModelList, res.data.records);
      loadingModel.value = false;
    })
    .catch((err: any) => {
      loadingModel.value = false;
      VxeMessage('搜索报告单元列表失败', VxeNotifyType.error);
    });
}

/**加载申请项目 */
function loadFeeItem() {
  feeItemModelList.length = 0;
  loadingModel.value = true;
  const url = '/lis/fee/item/findFeeItemList';
  let obj = { keyWords: '', };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      Object.assign(feeItemModelList, res.data);
      loadingModel.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      loadingModel.value = false;
    });
}

/**加载科室 */
function loadDepts() {
  deptModelList.length = 0;
  const url = '/api/sys/findDepartmentList';
  proxy.$http
    .get(url, { params: {} })
    .then((res: any) => {
      Object.assign(deptModelList, res.data.deptList);
      loadingModel.value = false;
    })
    .catch((err: any) => {
      loadingModel.value = false;
    });
}

/**确定选择 */
function confirmSelection() {
  switch (activeName.value) {
    case 'rptGroup':
      const arr = rptGroupModelRef.value?.getCheckboxRecords(true);
      if (arr && arr.length > 0) {
        Object.assign(rptGroupList, arr);
      }
      break;
    case 'feeItem':
      const arr1 = feeItemModelRef.value?.getCheckboxRecords(true);
      if (arr1 && arr1.length > 0) {
        Object.assign(feeItemList, arr1);
      }
      break;
    case 'department':
      const arr2 = deptModelRef.value?.getCheckboxRecords(true);
      if (arr2 && arr2.length > 0) {
        Object.assign(deptList, arr2);
      }
      break;
    default:
      break;
  }
  isVisiable.value = false;
}

/**添加时段 */
function addTimeSlot() {
  timeSlotList.push({ id: '', startTime: '', endTime: '' });
}

/**刷新组合 */
function refreshGroupList() {
  loadingDetail.value = true;
  rptGroupList.length = 0;
  feeItemList.length = 0;
  deptList.length = 0;
  timeSlotList.length = 0;
  const baseRuleRow = tableRef.value?.getCurrentRecord();
  const url = '/api/lab-tat-grouprule/findTatGroupruleDetails';
  let obj = { keywords: '', baseruleNo: baseRuleRow.baseruleNo };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      //Object.assign(feeItemModelList, res.data);
      if (res && res.status && res.status.code && res.status.code === 1) {
        Object.assign(rptGroupList, res.data.rptGroupList);
        Object.assign(feeItemList, res.data.feeItemList);
        Object.assign(deptList, res.data.departmentList);
        Object.assign(timeSlotList, res.data.timeSlotList);
      }
      loadingDetail.value = false;
    })
    .catch((err: any) => {
      loadingDetail.value = false;
      proxy.$alert(err, '提示');
    });
}

/**保存组合 */
function saveGroupruleList() {
  const baseRuleRow = tableRef.value?.getCurrentRecord();
  let data = {
    labTatBaserule: baseRuleRow,
    rptGroupList: rptGroupList,
    feeItemList: feeItemList,
    departmentList: deptList,
    timeSlotList: timeSlotList
  };
  const url = '/api/lab-tat-grouprule/saveOrUpdateGroupruleList';
  proxy.$http
    .post(url, data)
    .then((res: any) => {
      VxeMessage('保存成功', VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage('保存失败', VxeNotifyType.success);
    });
}

/**删除操作 */
function deleteMapperDetail() {
  switch (activeName.value) {
    case 'rptGroup':
      const row1 = rptGroupRef.value?.getCurrentRecord();
      const rowIndex = rptGroupRef.value?.getRowIndex(row1);
      rptGroupList.splice(rowIndex, 1);
      break;
    case 'feeItem':
      const row2 = feeItemRef.value?.getCurrentRecord();
      const rowIndex2 = feeItemRef.value?.getRowIndex(row2);
      feeItemList.splice(rowIndex2, 1);
      break;
    case 'department':
      const row3 = deptRef.value?.getCurrentRecord();
      const rowIndex3 = deptRef.value?.getRowIndex(row3);
      deptList.splice(rowIndex3, 1);
      break;
    case 'timeSlot':
      const row4 = timeSlotRef.value?.getCurrentRecord();
      const rowIndex4 = timeSlotRef.value?.getRowIndex(row4);
      timeSlotList.splice(rowIndex4, 1);
      break;
    default:
      break;
  }
}
</script>
<style lang="scss" scoped>
#labTatRules {
  width: 100%;
  height: 100%;

  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);

    .area {
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .tableBox {
        height: calc(100% - 40px);
      }

      .el-tabs--border-card {
        border: none;
        height: 100%;

        :deep(.el-tabs__content) {
          height: calc(100% - 39px - 30px);
          margin: 5px 5px !important;
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
}
:deep(.el-tabs__content) {
  padding: 0 !important;
}

:deep(.el-row) {
  margin-left: 0 !important;
  margin-right: 0px !important;
}
</style>